<template>
	<view class="order_box">
		<!-- head区域 -->
		<view class="head">
			<view class="useraddress">
				<view class="addressinfo" v-if="localBuffer" hover-class="touchOpacity" @click="addressAdd">
					<text space="ensp" class="addressinfo_top">{{address.username}} {{address.userphone}}</text>
					<view class="addressinfo_bottom">
						<!-- <uni-tag  size="small" type="error" :inverted="true" :circle="true" text="默认"></uni-tag>
						<uni-tag  size="small" type="error" :inverted="true" :circle="true" text="默认"></uni-tag> -->
						<text class="addressinfo_bottom_status" v-if="address.status ==1">默认</text>
						<text class="addressinfo_bottom_label" v-if="address.label != '' ">{{address.label}}</text>
						<text class="addressinfo_bottom_useraddress">{{address.location+address.useraddress}}</text>
					</view>
				</view>
				<view class="addressinfo" v-else>
					<u-button type="warning" :plain="true" @click="addressAdd">+点击完善收货地址</u-button>
				</view>
			</view>
		</view>

		<view class="order_ticket">
			<image src="../../static/icon/index/kingkong/selfsupport.png"></image>
			<text>品牌精选</text>
			<text>以免运费 |</text>
			<text>领券</text>
		</view>
		<!-- 商品信息区域 -->
		<view class="order_view">
			<!-- 明日来写购物车基本信息 -->
			<view class="cartInfochild" v-for="(item,index) in orders" :key="index">
				<!-- 图片 -->
				<image :src="baseUrl + item.img" class="cartInfo_image"></image>
				<!-- 信息 -->
				<view class="cartInfo_info">
					<text>{{item.goodsname}}</text>
					<text>￥
						<text style="font-size: 40rpx;color:#FF6040;">{{ item.price }}</text>
					</text>
					<text>七天无理由退货</text>
				</view>
				<!-- 加减数量 -->
				<view class="cartInfo_num">
					<label> ×{{item.num}}</label>
				</view>
			</view>
		</view>

		<!-- 具体详细1 -->
		<view class="resDetail">
			<view hover-class="touchOpacity">
				<label for="" class="resDetail_title">发票类型</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">不开发票 ></label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">售后免邮</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">部分商家赠送</label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">卖家留言</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">填写内容需要与商家协商并确认，45字以内</label>
			</view>
		</view>

		<!-- 具体详细2 -->
		<view class="resDetail" style="margin:10rpx 0 98rpx;">
			<view class="">
				<label for="" class="resDetail_title">商品金额</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">￥200</label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">优惠活动</label>
				<label for="" style="margin-right:40rpx;color:#FF6040;font-size: 24rpx;">-￥200</label>
			</view>
			<view hover-class="touchOpacity">
				<label for="" class="resDetail_title">优惠券</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">更多优惠券 ></label>
			</view>
		</view>
		<!-- 确认订单按钮 -->
		<view class="foot">
			<view class="foot_left">
				<text class="foot_left_count" space="ensp">合计<text>￥{{ countmoney }}</text></text>
				<text class="foot_left_ticket" space="ensp">已免运费 <text>已优惠￥100</text></text>
			</view>
			<view class="foot_right" hover-class="touchOpacity" @click="orderAdd">确认订单</view>
		</view>

	</view>
</template>

<script>
	var app =  getApp();
	export default {
		data() {
			return {
				baseUrl: this.$URL,
				orders: [], //商品的集合
				countmoney: 0,
				countnumber: 0,
				address: {
					status: 1,
					label: '公司',
					username: '李四',
					userphone: 13716078900,
					location: '北京市市辖区朝阳区',
					useraddress: '五方桥基地'
				}, //初始化收货地址
				localBuffer: false, //初始化收货地址开关
			}
		},
		onShow() {
			this.getCartsInfo();
			// 判断如何进入当前页面  【c从购物车过来的，还是重支付页面返回来的】
			let cartsInfo =  uni.getStorageSync("cartsInfo") || null;
			if(cartsInfo == null){
				// 支付页面返回的
				uni.redirectTo({
					url:"../orderlist/orderlist"
				})
				return;
			}
			// 判断如何进入当前页面 【操作的是选择收货地址】
			let  tag =  this.$mp.query.tag || null;
			// console.log(tag)
			if(tag ==1){
				// 地址栏有值，返回的
				this.address = JSON.parse(this.$mp.query.address);
				this.localBuffer =true;
			}else{
				this.getAddress();
			}
		},
		methods: {
			// 生成订单
			async orderAdd(){
				// 不涉及支付，只生成订单，返回订单编号
				// api： orderadd
				// params： uid  countmoney  countnumber addressid   idstr
				// header 
				// method： post
				let header = app.globalData.header;
				let uid = app.globalData.userInfo.uid;
				var idstr = this.orders.map((item)=>{
					return   item.id;
				});  //  1,3
				idstr =  idstr.join(",")
				
				var  option  = {
					url:"orderadd",
					data:{
						uid,
						countmoney:this.countmoney,
						countnumber:this.countnumber,
						addressid:this.address.id,
						idstr,
					},
					header,
					method:"post"
				}
				// console.log(option)
				var  res =  await this.$http(option);
				console.log(res)
				if(res.data.code == 403){
					// 过期了
					this.$tips.restore(this, app);
					uni.showModal({
						title: res.data.msg,
						content: "您确定重新登录么？",
						success(result) {
							// console.log(res)
							if (result.confirm) {
								// 同意登录
								uni.reLaunch({
									url: "../user/user"
								})
							} else {
								// 不同意登录
								uni.reLaunch({
									url: "../index/index"
								})
							}
						}
					})
				}else{
					// 没有过期
					let outTradeNo =  res.data.list.outTradeNo;//获取订单编号
					// 下单成功，删除本地缓存中的购物车信息
					uni.removeStorageSync("cartsInfo")
					// 跳转到支付页面
					// H5 网站能够支付
					//  如果是H5页面，那么跳转到支付页面，进行支付
					// #ifdef  H5
						uni.navigateTo({
							url:"../pay/pay?outTradeNo="+outTradeNo+"&totalAmount="+this.countmoney
						})
					// #endif
					//  除了H5 网页，下单成功之后，直接返回订单列表页面
					// #ifndef  H5
						uni.redirectTo({
							url:"../orderlist/orderlist"
						})
					// #endif
				}
			},
			// 点击收货地址，进入地址管理页面
			addressAdd(){
				uni.navigateTo({
					url:"../address/address"
				})
			},
			// 获取默认的收货地址
			async getAddress() {
				//  api:  addresslist
				// params: uid   status =1
				// header
				let app = getApp()
				let uid = app.globalData.userInfo.uid;
				let header = app.globalData.header;
				var option = {
					url: "addresslist",
					data: {
						uid,
						status: 1
					},
					header
				}
				// console.log(option)
				// 执行查询
				let res = await this.$http(option);
				// console.log(res)
				// 过期判断
				if(res.data.code == 403){
					// 登录过期
					// 过期了
					this.$tips.restore(this, app);
					uni.showModal({
						title: res.data.msg,
						content: "您确定重新登录么？",
						success(result) {
							// console.log(res)
							if (result.confirm) {
								// 同意登录
								uni.reLaunch({
									url: "../user/user"
								})
							} else {
								// 不同意登录
								uni.reLaunch({
									url: "../index/index"
								})
							}
						}
					})
				}else if(res.data.code ==200){
					// 查询成功
					if(res.data.list == null){
						// 证明没有一个地址
						this.localBuffer = false;
					}else{
						this.localBuffer =true;
						this.address = res.data.list[0]
					}
				}
			},
			// 获取商品信息
			getCartsInfo() {
				let {
					carts,
					totalPrice,
					totalNum
				} = uni.getStorageSync("cartsInfo");
				this.orders = carts;
				this.countmoney = totalPrice;
				this.countnumber = totalNum;
			}
		}
	}
</script>

<style scoped>
	/* 引入样式 */
	@import url("@/static/css/order.css");
</style>
